<template>
  <div class="wrap" v-loading="pageLoading" style="overflow-y: hidden" :class="{ 'no-scrollbar': hideScrollbar }">
    <div class="text-wrap flex flex-center flex-col-between">
      <!-- <div class="desc-text text-primary">
        <i class="el-icon-s-grid" />
        <span class="text">排程甘特图</span>
      </div> -->

      <div class="filter-container">
        <el-dropdown @command="dropCommand">
          <span class="el-dropdown-link pointer">
            版本：{{ VersionList.find(i => i.value == query.ScheduleVersionId)?.label}}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="i.value" v-for="i in VersionList" :key="i.value">{{ i.label
                }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>

      <div class="top">
        <div class="flex flex-center flex-col-center">
          <el-button type="text primary iconClass" @click="zoomChange(true)">
            <i class="el-icon-zoom-in mr5  "></i>视图放大
          </el-button>
          <el-button type="text primary iconClass" @click="zoomChange()">
            <i class="el-icon-zoom-out mr5 "></i>视图缩小
          </el-button>
          <!-- <el-button type="text primary iconClass" @click="zoomChange()">
            <i class="el-icon-check mr5 "></i>重新计算
          </el-button> -->
          <el-button type="text primary iconClass" @click="saveData()">
            <i class="el-icon-s-flag mr5 "></i>保存排程
          </el-button>
        </div>
      </div>
      <el-dropdown class="filter-item ">
        <el-button type="primary" size="small">
          交期状态<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- ['#409EFF', '#67C23A', '#F56C6C', '#E6A23C'], -->
            <el-dropdown-item class="flex flex-center"><span
                style="width: 10px;height: 20px;background-color: #F56C6C;border-radius: 4px;margin-right:2px"></span><span
                style="color:#F56C6C"> 无法满足交期</span></el-dropdown-item>
            <el-dropdown-item><span
                style="width: 10px;height: 20px;background-color: #67C23A;border-radius: 4px;margin-right:2px"></span><span
                style="color:#67C23A">提前满足交期</span></el-dropdown-item>
            <el-dropdown-item><span
                style="width: 10px;height: 20px;background-color: #409EFF;border-radius: 4px;margin-right:2px"></span><span
                style="color:#409EFF">当天生产当天出货</span></el-dropdown-item>
            <el-dropdown-item><span
                style="width: 10px;height: 20px;background-color: #E6A23C;border-radius: 4px;margin-right:2px"></span><span
                style="color:#E6A23C">完工日小于出货日7天以上</span></el-dropdown-item>
            <!-- <el-dropdown-item><span
                style="width: 10px;height: 20px;background-color: #666;border-radius: 4px;margin-right:2px"></span><span
                style="color:#666">排程未完成工单</span></el-dropdown-item> -->
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="flex gant">
      <div ref="gantt" class="ganttCss" style="overflow-y: auto"></div>
    </div>
    <el-dialog :title="`${curMo} 出货日修改`" v-model="ChangeDeadLine">
      <el-date-picker v-model="changeDeadLineValue" type="date" placeholder="选择日期" />
      <div class="fr">
        <el-button type="info" @click="ChangeDeadLine = false">取消</el-button>
        <el-button type="primary" @click="HandeChangeDeadLine">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script  setup>
import { ArrowDown } from '@element-plus/icons-vue'
</script>
<script>
import Gantt from '@/uitils/gantt/frappe-gantt.js'
import dayjs from 'dayjs'
import _ from 'lodash'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  data() {
    return {
      hideScrollbar: true,
      pageLoading: false,
      gantt: null,
      curMo: null,
      ChangeDeadLine: null,
      changeDeadLineValue: null,
      VersionList: [],
      query: {},
      maskList: [],
      // 选中左侧框
      muliBoxList: [],
      workhours: [],
      rows: [
      ],
      taskMulitp: [],
      viewModes: ['Fourth Day', 'Third Day', 'Half Day', 'Day'],
      currentView: 'Half Day',
      initInfo:{},
      CalculateTask:{},
    }
  },
  methods: {
    dropCommand(v){
      console.log(v,'vvv')
      this.query.ScheduleVersionId = v
      this.Gantt()
    },
    zoomChange(add) {
      let tmp = this.viewModes.findIndex((x) => x == this.currentView)
      tmp = tmp + (add ? -1 : 1)
      if (tmp < 0) {
        return this.$message.warning('Max')
      }
      if (tmp >= this.viewModes.length) {
        return this.$message.warning("min")
      }
      this.currentView = this.viewModes[tmp]

      this.gantt.change_view_mode(this.currentView)
    },
    vueSetScroll(e) {
      // this.$refs.left.scrollTop = e.target.scrollTop
    },
    // 右键
    menuClickHandle(index, name, task, barType, e) {
      console.log('右键')
    },
    //甘特图左侧的线体选择变化事件
    boxChange(value, item) {
      console.log('左侧的线体选择变化事件', value, item)
    },
    // 点击更新
    popupMoreClick(item, type) {
      return

      if (type == 0) {
        this.curMo = item.MoCode
        this.ChangeDeadLine = true
      } else {
        ElMessageBox.prompt('请输入新的UPH', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
        })
          .then(() => {
          })
      }
      console.log('点击更新', type, item)

    },
    HandeChangeDeadLine() {
      console.log('出货日修改确认')
    },
    // 多选数据处理
    selectFormDatas(val) {
      this.taskMulitp = val
    },
    errorMessage() {
      this.$message.error(
        'error'
      )
    },
    // 展示班表明细
    barTypeOneClick(row) {
      console.log(row)

    },

    // 移动工单
    async moveData(from, to, isLeft, isMulit) {

      this.$confirm('确定要移动工单吗？', '提示',) 

        .then(async (r) => {
          if (r == 'confirm') {
            let moveData = [],
              oldMoveData = []
            var tmpToData = _.cloneDeep(to)
            var tmpFromData = _.cloneDeep(from)
            // if (!from || !to) return
            // if (from.id == to.id) return

            if (isMulit) {
              // this.taskMulitp
              this.taskMulitp.sort(
                (a, b) => dayjs(a.start).valueOf() > dayjs(b.start).valueOf()
              )
              try {
                let query = {
                  tasks: this.taskMulitp,
                  GroupCode: tmpToData.GroupCode,
                }
                // await this.$request(
                //   this.$api.schedue + 'CheckWorkOrderLine',
                //   query,
                //   'post'
                // )
              } catch (error) {
                this.gantt.multipleList_clear()
                this.gantt.unselect_all()
                return
              }
              console.log(this.maskList, 'this.maskList')
              let toList = this.maskList
                .filter((x) => x.GroupCode == tmpToData.GroupCode)
                .sort(
                  (a, b) => dayjs(a.start).valueOf() > dayjs(b.start).valueOf()
                )
              let fromList = this.maskList
                .filter((x) => x.GroupCode == this.taskMulitp[0].GroupCode)
                .sort(
                  (a, b) => dayjs(a.start).valueOf() > dayjs(b.start).valueOf()
                )

              let deleteList = this.taskMulitp.map((x) =>
                x.MoCode.toString()
              )

              fromList = fromList.filter(
                (x) => !deleteList.includes(x.MoCode)
              )
              fromList.forEach((x, index) => (x.Seq = index + 1))
              this.taskMulitp.forEach((x) => (x.GroupCode = tmpToData.GroupCode))
              let otherToIndex = toList.findIndex(
                (x) => x.MoCode == tmpToData.MoCode
              )
              let sameLine = fromList[0].GroupCode == tmpToData.GroupCode

              // 优先清除掉线体移动的数据后进行otherToIndex去除
              if (sameLine) {
                for (let i = 0; i < this.taskMulitp.length; i++) {
                  let sameDeleteIndex = toList.findIndex(
                    (x) => x.MoCode == this.taskMulitp[i].MoCode
                  )
                  toList.splice(sameDeleteIndex, 1)
                  if (sameDeleteIndex < otherToIndex) otherToIndex -= 1
                }
              }
              for (let i = 0; i < this.taskMulitp.length; i++) {
                if (isLeft) {
                  toList.splice(
                    otherToIndex + i,
                    0,
                    _.cloneDeep(this.taskMulitp[i])
                  )
                } else {
                  toList.splice(
                    otherToIndex + i + 1,
                    0,
                    _.cloneDeep(this.taskMulitp[i])
                  )
                }
              }

              if (sameLine) {
                moveData = moveData.concat(toList)
              } else {
                moveData = moveData.concat(fromList).concat(toList)
              }
              moveData.forEach((x, index) => {
                x.Seq = index + 1
              })
            } else {
              if (tmpToData.GroupCode == tmpFromData.GroupCode) {
                moveData = this.maskList
                  .filter((x) => x.GroupCode == tmpToData.GroupCode)
                  .sort(
                    (a, b) =>
                      dayjs(a.start).valueOf() > dayjs(b.start).valueOf()
                  )
                oldMoveData = _.cloneDeep(moveData)
                let fromIndex = oldMoveData.findIndex(
                  (x) => x.MoCode == tmpFromData.MoCode
                )
                moveData = moveData.splice(fromIndex, 1)
                oldMoveData = oldMoveData.splice(fromIndex, 1)
                let toIndex = oldMoveData.findIndex(
                  (x) => x.MoCode == tmpToData.MoCode
                )
                if (isLeft) {
                  moveData.splice(toIndex, 0, _.cloneDeep(tmpFromData))
                } else {
                  moveData.splice(toIndex + 1, 0, _.cloneDeep(tmpFromData))
                }

                moveData.forEach((x, index) => {
                  x.Seq = index + 1
                })
              } else {
                try {
                  let query = {
                    tasks: [_.cloneDeep(tmpFromData)],
                    GroupCode: tmpToData.GroupCode,
                  }
                  // await this.$request(
                  //   this.$api.schedue + 'CheckWorkOrderLine',
                  //   query,
                  //   'post'
                  // )
                } catch (error) {
                  return
                }
                let toList = this.maskList
                  .filter((x) => x.GroupCode == tmpToData.GroupCode)
                  .sort(
                    (a, b) =>
                      dayjs(a.start).valueOf() > dayjs(b.start).valueOf()
                  )
                let fromList = this.maskList
                  .filter((x) => x.GroupCode == tmpFromData.GroupCode)
                  .sort(
                    (a, b) =>
                      dayjs(a.start).valueOf() > dayjs(b.start).valueOf()
                  )
                let otherFromIndex = fromList.findIndex(
                  (x) => x.MoCode == tmpFromData.MoCode
                )
                fromList.splice(otherFromIndex, 1)
                fromList.forEach((x, index) => (x.Seq = index + 1))
                tmpFromData.GroupCode = tmpToData.GroupCode
                let otherToIndex = toList.findIndex(
                  (x) => x.MoCode == tmpToData.MoCode
                )
                if (isLeft) {
                  toList.splice(otherToIndex, 0, _.cloneDeep(tmpFromData))
                } else {
                  toList.splice(otherToIndex + 1, 0, _.cloneDeep(tmpFromData))
                }
                toList.forEach((x, index) => (x.Seq = index + 1))
                moveData = moveData.concat(toList).concat(fromList)
              }
            }
            this.Rearrangement(moveData, null, false, false, 1)
            this.gantt.multipleList_clear()
            this.gantt.hide_popup()
            this.gantt.unselect_all()
          }
        })
        .catch()
    },
    Rearrangement(tasks, lines, isAll = false, isUndo = false, type = 0) {
      console.log(tasks, 'task')
      this.http.post('/api/Schedule/HandSchedule', { MoList: tasks }).then(r => {
        let data = _.cloneDeep(this.initInfo)
        data.task = data.task.filter(i => i.GroupCode != tasks[0].GroupCode)
        data.taskDate = data.taskDate.filter(i => i.GroupCode != tasks[0].GroupCode)
        this.CalculateTask = {
          reqTask: r.tasks,
          reqDate: r.taskDates
        }
        data.task.concat(r.task)
        data.taskDate.concat(r.taskDates)
        this.drawGantt(data)
      })
    },
    //初始化甘特图
    async init(options) {
      this.pageLoading = true

      let default_options = {
        view_mode: this.currentView,
        move_task: this.moveData,
        vueSetScroll: this.vueSetScroll,
        menuClickHandle: this.menuClickHandle,
        // 左侧容器checkbox change事件 参数（value,item,index） //checked的值 绑定到当前行的row行对象 index 为当前下标
        boxChange: this.boxChange,
        // popup more 点击更多
        popupMoreClick: this.popupMoreClick,
        // 选中数据
        selectFormDatas: this.selectFormDatas,
        errorMessage: this.errorMessage,
        // 行事历点击事件
        barTypeOneClick: this.barTypeOneClick,
        selectColor: 0,
        IsEdit: true,
        autoBgColor: [
          ['#409EFF', '#67C23A', '#F56C6C', '#E6A23C'],
          ['#666', '#409EFF'],
        ], //工单状态色
        autoTimeBg: ['#78b9fb30', '#67c23a30'], // 白夜班时间状态色
        clickBgColor: [],
        menuList: ['保存排程', '自动排序', '快照备份'],
        barMenuList: [
          // '详细信息',
          // this.$ts('UPHAdjustment'),
          "工单删除",
          // this.$ts('MaterialInventoryBrowsing'),
        ],
        dbBarMenuList: [
          "编辑",
          "删除",
          "查看班表信息",
        ],
        popupList: [
          { key: 'row_id', value: '工序' },
          {
            key: 'MoCode',
            value: '工单',
          },

          {
            key: 'StartTime',
            value: '开始时间',
            format: function (val) {
              return dayjs(val).format('YYYY-MM-DD HH:mm')
            },
          },
          {
            key: 'EndTime',
            value: '结束时间',
            format: function (val) {
              return dayjs(val).format('YYYY-MM-DD HH:mm')
            },
          },
          {
            key: 'DeadLine',
            value: '出货日',
            format: function (val) {
              return val ? dayjs(val).format('YYYY-MM-DD') : ''
            },
          },
          { key: 'Qty', value: '工单数' },
          { key: 'FinishedQty', value: '完工数量' },

          {
            key: 'Remark',
            value: '备注',
          },
          {
            key: 'Detail',
            value: '产出详情',
            columns: [
              {
                key: 'WorkDate',
                title: '日期',
                format: (val) => {
                  return dayjs(val).format('YYYY-MM-DD')
                },
              },
              {
                key: 'MachineName',
                title: '设备',
              },
              // {
              //   key: 'StartTime',
              //   title: '开始时间',
              //   format: (val) => {
              //     return dayjs(val).format('MM-DD HH:mm')
              //   },
              // },
              // {
              //   key: 'EndTime',
              //   title: '结束时间',
              //   format: (val) => {
              //     return dayjs(val).format('MM-DD HH:mm')
              //   },
              // },
              {
                key: 'ShiftType',
                title: '班次',
                format: (val) => {
                  if (val == undefined || val == '-1') return '/'
                  return ['白班', '夜班'][val]
                },
              },
              { key: 'Qty', title: '数量' },
              { key: 'UPH', title: 'UPH' },

            ],
          },
        ],
      }
      default_options = Object.assign({}, default_options, options)
      try {
        this.gantt = new Gantt(
          this.$refs.gantt,
          this.maskList,
          this.workhours,
          this.rows,
          default_options
        )
        this.pageLoading = false

      } catch (err) {
        console.log(err)
        this.pageLoading = false

      }
    },
    initData() {
      this.http.post('api/Bas_GroupConfig/getPageData', {}).then(r => {

        this.rows = r.rows.map(i => {
          return {
            id: i.GroupName,
            name: i.GroupCode,
            row_id: i.GroupName,
            groupId: i.GroupId,

          }
        })
        //this.rows 根据id排序
        this.rows.sort((a, b) => (a.name > b.name ? 1 : -1))
        // this.Gantt()
        this.getVersionData()

      })

    },
    saveData() {
      this.http.post('/api/Schedule/SaveSchedule', { ...this.CalculateTask }).then(r => {
        this.research()

        thi.CalculateTask = {}
      })
    },
    getVersionData() {
      this.http.post('/api/Aps_ScheduleVersion/GetPageData', {sort:"CreateTime"}).then(r => {
        this.VersionList = r.rows.map(i => {
          return {
            value: i.ScheduleVersionId,
            label: i.Version
          }
        })
        this.query.ScheduleVersionId = this.VersionList[0]?.value
        this.research()
      })
    },
    research() {
      this.Gantt()
    },
    getFinishStatus(item) {
      let { Detail } = item
      console.log(Detail,'Detail')
      // if (apstask.DeadLine != null && apstask.WorkingEndTime.Date > Convert.ToDateTime(apstask.DeadLine).Date)
      //   apstask.FinishStatus = 2;  //红
      // else if (apstask.DeadLine != null && apstask.WorkingEndTime.Date < Convert.ToDateTime(apstask.DeadLine).AddDays(-7).Date)
      //   apstask.FinishStatus = 3;  //黄
      // else if (apstask.DeadLine != null && apstask.WorkingEndTime.Date < Convert.ToDateTime(apstask.DeadLine).Date)
      //   apstask.FinishStatus = 1;  //绿
      // else if (apstask.DeadLine != null && apstask.WorkingEndTime.Date == Convert.ToDateTime(apstask.DeadLine).Date)
      //   apstask.FinishStatus = 0;  //蓝
      Detail = Detail.sort((a,b) => a.EndTime - b.EndTime > 0 ? -1 : 1) 
      if (!item.DeadLine) return null
      let DeadLine = dayjs(item.DeadLine).format('YYYY-MM-DD')
      let EndTime = dayjs(Detail[Detail.length-1]?.EndTime).format('YYYY-MM-DD')
      let StartTime = dayjs(Detail.StartTime).format('YYYY-MM-DD')

      // 如果EndTime 时间大于DeadLine 返回2
      if (EndTime > DeadLine) {
        return 2 //红
      } else if (EndTime < dayjs(DeadLine).add(-7, 'day').format('YYYY-MM-DD')) {
        return 3 //黄
      } else if (EndTime < DeadLine) {
        return 1 //绿
      } else if (EndTime == DeadLine) {
        return 0 //蓝
      }




    },
    drawGantt(r) {
        let { MinDate, MaxDate, task, taskDate, calendar, restDays } = r

        let taskDates = taskDate.map(i => i.Details)

        taskDates = taskDates.flat()

        calendar.forEach((x) => {
          x.row_id = this.rows[0].id
          x.id = x.PlantCalendarId
          x.start = x.ShiftType
            ? dayjs(x.WorkDate).add(12, 'hours').format('YYYY-MM-DD HH:mm:ss')
            : x.WorkDate
          x.end = dayjs(x.start).add(12, 'hours').format('YYYY-MM-DD HH:mm:ss')
          x.barType = 1
          x.selectStatus = true
          x.custom_class = 'bar-milestone'
        })

        task = task.filter(i => dayjs(i.StartTime).isAfter(dayjs(calendar[0].WorkDate)))
        console.log(task, 'task')
        task.forEach((x) => {
          x.id = x.ScheduleTaskId
          x.start = x.StartTime
          x.end = x.EndTime
          x.row_id = x.GroupName
          x.barType = 2
          x.IsFinish = true
          x.custom_class = 'bar-milestone'
          x.Detail = taskDates.filter((l) => {
            const startTime = dayjs(l.StartTime); // 假设 StartTime 是字符串格式的时间
            const endTime = dayjs(l.EndTime);     // 假设 EndTime 是字符串格式的时间
            return l.MoCode === x.MoCode &&
              startTime.isSameOrAfter(x.start) &&
              endTime.isSameOrBefore(x.end);

          }) || []
          x.WorkDate = x.Detail.length > 0 ? x.Detail[0].WorkDate : null,
          x.FinishStatus = this.getFinishStatus(x)

        })

        this.muliBoxList = [] //清空选中状态
        this.maskList = task
        this.workhours = calendar
        this.taskDate = taskDate


        let options = {
          IsEdit: true,
          Holidays: restDays,
        }
        if (this.gantt) {
          this.gantt.unselect_all()
          this.gantt.refresh(this.maskList, this.workhours, this.rows, options)
        } else this.init(options)
     

    },
    Gantt() {
      let data = {
        ScheduleVersionId: this.query.ScheduleVersionId,
        GroupIds: this.rows.map(i => i.groupId)
      }
      this.http.post('/api/Aps_ScheduleTask/GetGanttData', data).then(r => {
        this.initInfo = r
        this.drawGantt(r)
        return
        let { MinDate, MaxDate, task, taskDate, calendar, restDays } = r

        let taskDates = taskDate.map(i => i.Details)

        taskDates = taskDates.flat()

        calendar.forEach((x) => {
          x.row_id = this.rows[0].id
          x.id = x.PlantCalendarId
          x.start = x.ShiftType
            ? dayjs(x.WorkDate).add(12, 'hours').format('YYYY-MM-DD HH:mm:ss')
            : x.WorkDate
          x.end = dayjs(x.start).add(12, 'hours').format('YYYY-MM-DD HH:mm:ss')
          x.barType = 1
          x.selectStatus = true
          x.custom_class = 'bar-milestone'
        })

        task = task.filter(i => dayjs(i.StartTime).isAfter(dayjs(calendar[0].WorkDate)))
        console.log(task, 'task')
        task.forEach((x) => {
          x.id = x.ScheduleTaskId
          x.start = x.StartTime
          x.end = x.EndTime
          x.row_id = x.GroupName
          x.barType = 2
          x.IsFinish = true
          x.FinishStatus = this.getFinishStatus(x)
          x.custom_class = 'bar-milestone'
          x.Detail = taskDates.filter((l) => {
            const startTime = dayjs(l.StartTime); // 假设 StartTime 是字符串格式的时间
            const endTime = dayjs(l.EndTime);     // 假设 EndTime 是字符串格式的时间
            return l.ScheduleTaskId === x.ScheduleTaskId &&
              startTime.isSameOrAfter(x.start) &&
              endTime.isSameOrBefore(x.end);

          }) || []
          x.WorkDate = x.Detail.length > 0 ? x.Detail[0].WorkDate : null
        })

        this.muliBoxList = [] //清空选中状态
        this.maskList = task
        this.workhours = calendar
        this.taskDate = taskDate


        let options = {
          IsEdit: true,
          Holidays: restDays,
        }
        console.log(this.gantt, 'this.gantt')
        if (this.gantt) {
          this.gantt.unselect_all()
          this.gantt.refresh(this.maskList, this.workhours, this.rows, options)
        } else this.init(options)
      })
    },
  },
  mounted() {
    this.initData()
    // this.getVersionData()
  },
}
</script>

<style lang="scss">
@import url('../../../uitils/gantt/frappe-gantt.css');

.text-wrap {
  height: 40px;
  position: relative;
  display: flex;
  margin-top: 20px;
  padding: 0 10px;

  .desc-text {
    //  display: inline-block;
    margin-top: 7px;
    font-weight: bold;
    //margin-bottom: 3px;
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 2px solid #7300e6;

    i {
      font-size: 16px;
      position: relative;
      top: 1px;
      margin-right: 2px;
    }
  }
}
.iconClass {
  font-size: 12px;
  // color:#7300e644;
}
.no-scrollbar {
  overflow: hidden;
  /* 或者使用其他方法隐藏滚动条 */
  /* 针对需要隐藏滚动条但保留滚动能力的场景，可以使用上面的WebKit和Firefox方法 */
}
 .el-dropdown-link {
  cursor: pointer;
  color: #7300e6;
  display: flex;
  align-items: center;
}
.wrap {
  height: 100%;
  width: 100%;

  .top {
    height: 40px;
    border-bottom: 1px solid #eee;
    // background-color: pink;
  }

  .gant {
    // height: calc(100% - 40px);
    overflow-y: auto;
  }

  // overflow-y: auto;
}

.flex {
  .icon-btn {
    .icon {
      font-size: 16px;
    }

    .title {
      font-size: 12px;
    }

    width: 60px;
    min-height: 50px;
    background: #efefef;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 5px 5px 0;
    padding-top: 6px;
  }
}

.no-margin .icon-btn {
  margin: 0;
  margin-left: 4px;
}


.ganttCss {
  width: 100%;
  height: 100%;
  transition: all 0.35s;
}

// ::v-deep .el-input {
//   width: 240px !important;
// }
::v-deep .el-col {
  margin-bottom: 10px;
}


.lineHeight24 {
  line-height: 24px;
  margin-left: 4px;
}
</style>
